<template>
	<view class="cleancar-container">
		<!-- 搜索框区域 -->
		<view class="search-section">
			<view class="search-box">
				<view class="search-input-wrapper">
					<uni-icons type="search" size="16" color="#999"></uni-icons>
					<input 
						class="search-input" 
						placeholder="搜索" 
						v-model="searchKeyword"
						@confirm="handleSearch"
					/>
				</view>
				<button class="search-btn" @click="handleSearch">搜索</button>
			</view>
		</view>
		
		<!-- 搜索结果列表 -->
		<view class="results-section">
			<view 
				class="shop-item" 
				v-for="(item, index) in shopList" 
				:key="index"
				@click="goToShopDetail(item)"
			>
				<view class="shop-image">
					<image src="/static/c1.png" mode="aspectFill"></image>
				</view>
				<view class="shop-info" @click="goToCleanCarMsg">
					<view class="shop-header">
						<text class="shop-name">{{item.name}}</text>
						<text class="distance">{{item.distance}}</text>
					</view>
					<view class="shop-rating">
						<view class="stars">
							<uni-icons 
								v-for="i in 5" 
								:key="i"
								type="star" 
								size="12" 
								:color="i <= item.rating ? '#FFD700' : '#E0E0E0'"
							></uni-icons>
						</view>
						<text class="rating-text">{{item.rating}}分</text>
						<text class="sales-text">销量: {{item.sales}}</text>
					</view>
					<view class="shop-hours">
						<text class="hours-text">营业时间: {{item.hours}}</text>
					</view>
					<view class="shop-address">
						<text class="address-text">{{item.address}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				shopList: [
					{
						id: 1,
						name: '小王汽车美容店',
						distance: '44m',
						rating: 3,
						sales: 322,
						hours: '周一至周五 09:00-22:00',
						address: '山阳区人民中路32号',
						image: '/static/c1.png'
					},
					{
						id: 2,
						name: '小王汽车美容店',
						distance: '44m',
						rating: 3,
						sales: 322,
						hours: '周一至周五 09:00-22:00',
						address: '山阳区人民中路32号',
						image: '/static/c1.png'
					},
					{
						id: 3,
						name: '小王汽车美容店',
						distance: '44m',
						rating: 3,
						sales: 322,
						hours: '周一至周五 09:00-22:00',
						address: '山阳区人民中路32号',
						image: '/static/c1.png'
					},
					{
						id: 4,
						name: '小王汽车美容店',
						distance: '44m',
						rating: 3,
						sales: 322,
						hours: '周一至周五 09:00-22:00',
						address: '山阳区人民中路32号',
						image: '/static/c1.png'
					}
				]
			}
		},
		methods: {
			goToCleanCarMsg(){
				uni.navigateTo({
				  url: '/pages/cleancar-msg/cleancar-msg'
				})
			},
			handleSearch() {
				// 处理搜索逻辑
				console.log('搜索关键词:', this.searchKeyword);
				// 这里可以添加实际的搜索API调用
			},
			goToShopDetail(shop) {
				// 跳转到店铺详情页
				console.log('跳转到店铺详情:', shop);
				// uni.navigateTo({
				// 	url: `/pages/shop-detail/shop-detail?id=${shop.id}`
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
.cleancar-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.search-section {
	padding: 20rpx;
	background-color: #fff;
}

.search-box {
	height: 60rpx;
	display: flex;
	align-items: center;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	padding: 0 20rpx;
}

.search-input-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 20rpx 0;
}

.search-input {
	flex: 1;
	margin-left: 20rpx;
	font-size: 26rpx;
	color: #333;
	height: 60rpx;
}

.search-btn {
	background-color: #007aff;
	color: #fff;
	font-size: 28rpx;
	padding: 20rpx 40rpx;
	border-radius: 8rpx;
	border: none;
	margin-left: 20rpx;
	height: 60rpx;
	display: flex;
	  align-items: center; /* 垂直居中 */
	  justify-content: center; /* 水平居中（通常搭配使用） */
}

.results-section {
	padding: 20rpx;
}

.shop-item {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: flex-start;
	height: 170rpx;
}

.shop-image {
	width: 160rpx;
	height: 160rpx;
	margin-right: 30rpx;
	flex-shrink: 0;
}

.shop-image image {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
}

.shop-info {
	flex: 1;
	height: 170rpx;
}

.shop-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 15rpx;
}

.shop-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	flex: 1;
}

.distance {
	font-size: 24rpx;
	color: #007aff;
	margin-left: 20rpx;
}

.shop-rating {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.stars {
	display: flex;
	margin-right: 15rpx;
}

.rating-text {
	font-size: 24rpx;
	color: #666;
	margin-right: 30rpx;
}

.sales-text {
	font-size: 24rpx;
	color: #666;
}

.shop-hours {
	margin-bottom: 10rpx;
}

.hours-text {
	font-size: 24rpx;
	color: #666;
}

.shop-address {
	
}

.address-text {
	font-size: 24rpx;
	color: #999;
}
</style>

